<template>
    <div class="app-product-list">
        <div class="list-container">
                <ProductHeader></ProductHeader>
                <ProductBanner></ProductBanner>
                <ProductDetail></ProductDetail>
                <ProductFooter :changeFlag="changeFlag" :flag="flag"></ProductFooter>
        </div>
        <ProductConfirm :flag="flag" ref="confirm" :changeFlag="changeFlag"></ProductConfirm>

    </div>
</template>

<script>
import ProductHeader from "components/common/product/product-header"
import ProductBanner from "components/common/product/product-banner"
import ProductDetail from "components/common/product/product-detail"
import ProductFooter from "components/common/product/product-footer"
import ProductConfirm from "components/common/product/product-confirm"
import {mapActions,mapGetters,mapMutations,mapState} from "vuex"

export default {
    data(){
        return {
            flag: true
        }
    },
    components: {
        ProductHeader,
        ProductBanner,
        ProductDetail,
        ProductFooter,
        ProductConfirm
    },
    methods: {    
        
        changeFlag(){
            this.flag = !this.flag
            console.log("this.flag",this.flag)
            
        },
        ProductList(){

            let goodsId = this.$route.query.goodsId
            if(goodsId){
                this.$store.dispatch("ProductList/ProductList",{goodsId})
            }
          
        },
        ProductTitle(){

            let goodsId = this.$route.query.goodsId
            if(goodsId){
                this.$store.dispatch("ProductList/ProductTitle",{goodsId: goodsId})
            }
           
        },

    },
    
    created(){
        this.ProductList()
        this.ProductTitle()
    }
}
</script>

<style lang="stylus" scoped>
    .app-product-list
        height 100%
        position relative
        .list-container
            overflow-y  hidden
            height 100%
            // display none 

</style>